<!-- Register page -->
<template>
  <div class="register-style-constraint">
    <a-layout>
      <a-layout-header>
        <h2>SNAKE-API | 欢迎注册</h2>
      </a-layout-header>
      <a-layout-content>
        <a-form id="form-mark-register" :form="form" @submit="handleSubmit">
          <a-form-item v-bind="formItemLayout">
            <span slot="label">
              用户名
              <a-tooltip title="用户名设置后不可更改，请谨慎操作">
                <a-icon type="question-circle-o" />
              </a-tooltip>
            </span>
            <a-input v-decorator="checkUserId" placeholder="数字与英文6位" />
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="密码">
            <a-input
              v-decorator="checkPwd"
              type="password"
              placeholder="数字\英文\_\6位"
            />
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="确认密码">
            <a-input
              v-decorator="checkConfirmPwd"
              type="password"
              placeholder="请输入密码..."
              @blur="handleConfirmBlur"
            />
          </a-form-item>
          <a-form-item
            v-bind="formItemLayout"
            label="邮箱"
            :hideRequiredMark="false"
          >
            <a-input v-decorator="checkEmail" placeholder="请输入邮箱..." />
          </a-form-item>
          <a-form-item
            v-bind="formItemLayout"
            label="姓名"
            :hideRequiredMark="false"
          >
            <a-input v-decorator="checkNickName" placeholder="请输入昵称..." />
          </a-form-item>
          <!-- <a-form-item
            v-bind="formItemLayout"
            label="手机号"
            :hideRequiredMark="false"
          >
            <a-input v-decorator="checkPhone" placeholder="请输入手机号...">
              <a-select
                slot="addonBefore"
                v-decorator="['prefix', { initialValue: '86' }]"
                style="width: 70px"
              >
                <a-select-option value="86"> +86</a-select-option>
                <a-select-option value="81"> +81</a-select-option>
                <a-select-option value="1"> +1</a-select-option>
              </a-select>
            </a-input>
          </a-form-item>
          <a-form-item
            v-bind="formItemLayout"
            label="验证码"
            extra=" We must make sure that your are a human."
          >
            <a-row :gutter="8">
              <a-col :span="15">
                <a-input
                  v-decorator="checkCaptcha"
                  type="number"
                  placeholder="请输入验证码..."
                />
              </a-col>
              <a-col :span="9">
                <a-button>获取验证码</a-button>
              </a-col>
            </a-row>
          </a-form-item> -->
          <a-form-item v-bind="tailFormItemLayout">
            <a-checkbox
              v-decorator="checkAgreement"
              @click="changeCheckbox(disabledButton)"
            >
              <span>阅读并接受</span>
              <a
                target="_blank"
                href="http://passport.baidu.com/static/passpc-account/html/protocal.html"
                >《SNAKE-API 用户协议》</a
              >
            </a-checkbox>
          </a-form-item>
          <a-form-item v-bind="tailFormItemLayout">
            <a-button
              type="primary"
              html-type="submit"
              style="width: 100%"
              :disabled="disabledButton"
            >
              <span>注册</span>
            </a-button>
          </a-form-item>
        </a-form>
      </a-layout-content>
      <!-- <a-layout-footer :style="{ textAlign: 'center',padding:'10px 50px' }">
                 SNAKE-API ©2019 Created by seebin
             </a-layout-footer>-->
    </a-layout>
  </div>
</template>

<script lang="ts" src="./register.ts"></script>

<style lang="scss">
@import './register.scss';

.register-style-constraint {
  #form-mark-register {
    width: 36%;
    background: white;
  }
  .ant-layout-header {
    background: white;
    border-bottom: #eee solid 1px;
  }
  .ant-layout-content {
    padding-top: 25px;
    background: white;
  }
}
</style>
